import { List, Typography } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import { ENUMS } from './stores/definitions';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';

const CompareList = (props) => {
  const {
    step,
    index,
    curTask,
    curOrder,
    form,
    originTask,
    originOrder,
  } = props;
  const { orderChangeStore: store } = useStore();
  const [originPriceDifference, setOriginPriceDifference] = useState(0);

  useEffect(() => {
    const tmp = store.priceDifference;
    setOriginPriceDifference(tmp);
  }, []);

  const originCompareObj = form.createCompareObj(originOrder, originTask);
  const curCompareObj = form.createCompareObj(toJS(curOrder), curTask);

  const diffObj = form.compareObjects(originCompareObj, curCompareObj);

  if (diffObj?.priceDifference) {
    const curPriceDifference = toJS(store.priceDifference);
    if (Number(curPriceDifference) !== Number(originPriceDifference)) {
      curCompareObj.priceDifference = `${diffObj?.priceDifference} (原差价：${originPriceDifference})`;
    }
  }

  if (diffObj?.predictBeginDate) {
    const { surcharges: newSur } = curTask;
    const { selectedSurchargeKeys: oldSurKeys } = originTask;
    const { all: newSurKeys } = form.initSelectSurchargeKeys(newSur);
    const diffSur = form.compareObjects({ surcharges: oldSurKeys }, { surcharges: newSurKeys });
    if (diffSur?.surcharges) {
      const tmp = diffObj?.surcharges || [];
      const newSurchargesKeys = [...new Set([...tmp, ...diffSur.surcharges])];
      diffObj.surcharges = newSurchargesKeys;
      curCompareObj.surcharges = newSurKeys.join(',');
    }
  }

  const changeInfo = formatChangeInfo(diffObj, originCompareObj, curCompareObj);

  useEffect(() => {
    form.changeInfo.newData[index] = changeInfo?.after;
    form.changeInfo.oldData[index] = changeInfo?.before;
  }, [step]);

  /**
   * @desc 格式化修改项
   * @param {}
   * @return {}
   */
  function formatChangeInfo(diff, oldData, newData) {
    const res = {
      before: [],
      after: [],
    };
    const diffObjKeys = Object.keys(diff);
    if (diffObjKeys.length <= 0) { return res; }
    const { compareTitle } = ENUMS;
    for (const key of diffObjKeys) {
      res.before.push(`${compareTitle[key]}${oldData[key]}`);
      res.after.push(`${compareTitle[key]}${newData[key]}`);
    }

    return res;
  }

  return (
    <>
      <div style={{
        display: 'flex',
        flexDirection: 'row',
        height: '80%',
        margin: '0,auto',
        textAlign: 'center',
      }}
      >
        <List
          header={<div style={{ fontSize: '20px' }}>修改前</div>}
          bordered
          dataSource={changeInfo.before}
          renderItem={item => <List.Item>{item}</List.Item>}
          style={{ width: '50%', height: '100%' }}
        />
        <List
          header={<div style={{ fontSize: '20px' }}>修改后</div>}
          bordered
          dataSource={changeInfo.after}
          renderItem={item => (
            <List.Item>
              <Typography.Text mark>{item}</Typography.Text>
            </List.Item>
          )}
          style={{ width: '50%', height: '100%' }}
        />
      </div>
    </>
  );
};

export default observer(CompareList);
